<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/common.jsp" %>
<title>更换登陆手机号</title>
<link rel="stylesheet" type="text/css" href="${ctx }/css/weui.min.css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/statics/aui/css/aui.css"/>
<script type="text/javascript">

/**
 * 只能输入数字
 * @param obj
 * @returns
 */
function repNumber(obj) {
    var reg = /^[\d]+$/g;
     if (!reg.test(obj.value)) {
         var txt = obj.value;
         txt.replace(/[^0-9]+/, function (char, index, val) {//匹配第一次非数字字符
            obj.value = val.replace(/\D/g, "");//将非数字字符替换成""
            var rtextRange = null;
            if (obj.setSelectionRange) {
                obj.setSelectionRange(index, index);
            } else {//支持ie
                rtextRange = obj.createTextRange();
                rtextRange.moveStart('character', index);
                rtextRange.collapse(true);
                rtextRange.select();
            }
        })
     }
 }
 
function clickButton(obj) {
	var mobile = $("#mobile").val();
    var obj = $("#checkSendOutCode");
    obj.attr("disabled", "disabled");/* 按钮倒计时 */
	if (mobile.trim().length == 0) {
		$("#DialogMessage").html("请先输入手机号码");
        $iosDialog2.fadeIn(200);
		
		obj.attr("disabled", false).val("发送验证码");/* 倒计时 */
		$("#mobile").focus();
		return;
	}else if(!(/^1[34578]\d{9}$/.test(mobile.trim()))){
		$("#DialogMessage").html("请输入正确的手机号");
        $iosDialog2.fadeIn(200);
        obj.attr("disabled", false).val("发送验证码");/* 倒计时 */
        return false;
    } else {
        $.ajax({
            type:"POST",
            url:"../auth/getChangeValidCode",
            data:{mobile:mobile},
            dataType:"json",
            success:function(result){
                if(result.code==0){
                    getValidCode();
                }else{
                	$("#DialogMessage").html(result.msg);
                    $iosDialog2.fadeIn(200);
				}
            },error: function (data) {
                obj.attr("disabled", false).val("发送验证码");/* 倒计时 */
            }
        });
        obj.attr("disabled", false).val("发送验证码");/* 倒计时 */
	}

}

function getValidCode(mobile){
    var obj = $("#checkSendOutCode");
    var time = 60;
    var set = setInterval(function() {
        obj.val(--time + "(s)");
    }, 1000);/* 等待时间 */
    setTimeout(function() {
        obj.attr("disabled", false).val("重新获取验证码");/* 倒计时 */
        clearInterval(set);
    }, 60000);
}

function sureChange(){
	var openid = $("#openid").val();
	var mobile = $("#mobile").val();
	var id = $("#id").val();
	var validationCode = $("#validationCode").val();
	if (mobile.trim().length == 0) {
		$("#DialogMessage").html("请填写手机号码");
        $iosDialog2.fadeIn(200);
		return;
	}else  if(!(/^1[34578]\d{9}$/.test(mobile.trim()))){
		$("#DialogMessage").html("请输入正确的手机号");
        $iosDialog2.fadeIn(200);
        return ;
    }
	if (validationCode.trim().length == 0) {
		$("#DialogMessage").html("请输入验证码");
        $iosDialog2.fadeIn(200);
		return;
	}
	$.ajax({
		type : "POST",
		url :"../auth/sureChange",
		data : {
			openid : openid,
			validationCode : validationCode,
			mobile : mobile,
			id : id
		},
		dataType : "json",
		success : function(result) {
			if(result.code=="0"){
				$("#DialogMessage").html("更换成功");
                $iosDialog2.fadeIn(200);
                setTimeout("tiemOutHerf()","3000");
			}else{
				$("#DialogMessage").html(result.msg);
                $iosDialog2.fadeIn(200);
			}
		}
	});
}

function tiemOutHerf(){
	location.href="../auth/isMerchant";
}
</script>
<title>更换手机号</title>
<style type="text/css">
.refresh_test {
	font-family: PingFangSC-Regular;
	font-size: 14px;
	color: #666666;
	line-height: 21px;
	text-align: center;
}

.receivables_error {
	font-family: PingFangSC-Regular;
	font-size: 18px;
	color: #333333;
	text-align: center;
}

.receivables_text {
	font-family: PingFangSC-Regular;
	font-size: 15px;
	color: #666666;
	line-height: 30px;
	text-align: right;
}

.receivables_amt {
	font-family: PingFangSC-Regular;
	font-size: 20px;
	color: #333333;
	line-height: 21px;
	text-align: right;
}

.sonlx {
	font-family: PingFangSC-Regular;
	font-size: 13px;
	color: #666666;
	letter-spacing: 0px;
	text-align: center;
}
</style>
</head>

<body>
<input type="hidden" id="openid"  value="${openid}" name="openid">
<input type="hidden" id="id" value="${id}" name="id">
	<section class="aui-content">
		<ul class="aui-list">
 
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-media" style="width: 4rem;">新手机号</div>
					<div class="aui-list-item-inner  ">
						<input   type="tel" id="mobile" name="mobile" maxlength="11" placeholder="请输入您的手机号码" onkeyup="repNumber(this)"  >
					</div>
				</div>
			</li>

			<li class="aui-list-item   ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-media" style="width: 4rem;">验证码</div>
					<div class="aui-list-item-inner  ">
						<input   type="tel" id="validationCode" name="validationCode" maxlength="6" style="width: 8rem;" placeholder="请输入短信验证码">
						<input type="button" class="aui-btn aui-btn-warning" id="checkSendOutCode" value="发送验证码"  onclick="clickButton(this)"/>
					</div>
				</div>
			</li> 
		</ul>
	</section>

	<section class="aui-content" style="margin-top: 14px; padding-left: 20px; padding-right: 20px;">
		<p>
		<div class="aui-btn aui-btn-info  aui-btn-block"  onclick="sureChange()">确认更换</div>
		</p>
	</section>
	<div class="sonlx" style="margin-top: 10px;">
		<center>更换手机后，将使用新的手机号登录</center>
	</div>
	
	<div id="dialogs">
    <div class="js_dialog" id="iosDialog2" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd" id="DialogMessage"></div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary DeleteDefault">确定</a>
            </div>
        </div>
    </div>
	</div>
</body>
<script type="text/javascript">
	
		//弹框提示初始化
		var $iosDialog2 = $('#iosDialog2');
		$('#dialogs').on('click', '.DeleteDefault', function () { //取消按钮事件
		    $(this).parents('.js_dialog').fadeOut(200);
		});
</script>
</html>